<template>
  <div id="studyTime">
    <section class="header">
      <h1>学时排名</h1>
      <aside>
        <div v-if="show">
          <span @click="changeBtn(0)">点击这里暂停学习！</span>
          <span @click="changeBtn(1)">点击这里结束学习！</span>
        </div>
        <span @click="changeBtn(0)" v-show="!show">点击这里开始学习了噢！</span>
      </aside>
    </section>
    <div class="info">
      <ul>
        <li>名次：{{ info.rank }}</li>
        <li>姓名：{{ info.username }}</li>
        <li>时长：{{ duration }}</li>
        <li>目标：{{ info.passTime }}h</li>
        <li v-if="info.isPass===1">达标</li>
        <li v-if="info.isPass===0">不达标</li>
      </ul>
    </div>
    <div class="ranking">
      <div class="rank-nav">
        <ul>
          <li>名次</li>
          <li>姓名</li>
          <li>时长</li>
          <li>目标</li>
          <li>是否达标</li>
        </ul>
      </div>
      <div class="rank-wrap" :style="{height:RankH}">
        <ul>
          <li v-for="(item,index) in ranks">
            <span>{{ index + 1 }}</span>
            <span>{{ item.username }}</span>
            <span>{{ item.time_length }}h</span>
            <span>{{ item.passTime }}h</span>
            <span v-if="item.isPass===1">达标</span>
            <span v-if="item.isPass===0">不达标</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref, computed, getCurrentInstance, onMounted, reactive} from "vue";
import router from "../../router";
import $store from "@/store";

export default defineComponent({
  name: 'studyTime',
  setup() {
    const {proxy} = getCurrentInstance();
    let show = ref(false);
    let int, num;
    let timer = 0;
    let ranks = ref();
    let info = ref({
      isPass: 0,
      passTime: 0,
      rank: "",
      time_length: 0,
      username: ""
    });
    let bodyHeight = ref(0);
    const getTime = () => {
      return {
        hour: 0,
        minute: 0,
        second: 0
      }
    }
    const time = reactive(getTime());

    //获取排名
    proxy.$request(proxy.$getRoute(74).route_method, proxy.$getRoute(74).route_url, {}).then(res => {
      ranks.value = res.data;
    })

    proxy.$request(proxy.$getRoute(102).route_method, proxy.$getRoute(102).route_url, {}).then(res => {
      info.value = res.data
      num = info.value.time_length

      proxy.$request(proxy.$getRoute(106).route_method, proxy.$getRoute(106).route_url, {}).then(res => {
        if (res.data.record_time !== '') {
          show.value = true
          let t = new Date(res.data.record_time * 1000)
          let nowTime = new Date()
          let timeH = (Math.floor((nowTime - t) / 1000 / 60 / 60)),
              timeM = (Math.floor((nowTime - t) / 1000 / 60) % 60)
          timer = (Math.floor((nowTime - t) / 1000 / 60) / 60).toFixed(2)
          time.hour = num + timeH | 0
          let min = String(num).split(".")[1] * 60 / 100 | 0;
          if (min + timeM >= 60) {
            time.hour += 1
            time.minute = min + timeM - 60
          } else {
            time.minute = min + timeM
          }
          startTime();
        } else {
          time.hour = num | 0
          time.minute = String(num).split(".")[1] * 60 / 100 | 0
        }
      })
    })


    onMounted(() => {
      bodyHeight.value = document.body.clientHeight;
      window.onresize = () => {
        return (() => {
          bodyHeight.value = document.body.clientHeight
        })()
      }
      window.onbeforeunload = () => {
        confirm()
      }
    })

    let RankH = computed(() => {
      return bodyHeight.value - 510 + 'px';
    })

    let duration = computed(() => {
      let h = 0, m = 0, s = 0;
      time.hour < 10 ? h = '0' + time.hour : h = time.hour;
      time.minute < 10 ? m = '0' + time.minute : m = time.minute;
      time.second < 10 ? s = '0' + time.second : s = time.second;
      return h + ':' + m + ':' + s
    })

    function changeBtn(val) {
      if (show.value === false) {
        //开始计时
        let t = Math.round(new Date().getTime() / 1000).toString();
        proxy.$request(proxy.$getRoute(105).route_method, proxy.$getRoute(105).route_url, {
          'time': t
        })
        show.value = true;
        startTime()
      } else {
        //结束计时
        if (val === 1) {
          proxy.$request(proxy.$getRoute(75).route_method, proxy.$getRoute(75).route_url, {
            'time': (timer / 60 / 60).toFixed(2)
          }).then(() => {
            proxy.$request(proxy.$getRoute(74).route_method, proxy.$getRoute(74).route_url, {}).then(res => {
              ranks.value = res.data;
            })
          })
          // Object.assign(time, getTime())
          timer = 0
        }
        show.value = false;
        clearInterval(int)
      }
    }


    function startTime() {
      int = setInterval(() => {
        timer++;
        time.second++;
        if (time.second >= 60) {
          time.second = 0;
          time.minute += 1
        }
        if (time.minute >= 60) {
          time.minute = 0;
          time.hour += 1
        }
      }, 1000)
    }

    return {
      show,
      RankH,
      time,
      info,
      ranks,
      duration,
      changeBtn
    }
  },
})
</script>
<style scoped>
body {
  overflow-y: hidden;
}
</style>
<style lang="less">
body {
  //background: #F5F5F5;
  background: #FFF;
}

ul {
  list-style: none;
}

#studyTime {
  width: 1200px;
  margin: 0 auto;
  padding-top: 65px;
  box-sizing: border-box;

  .header {
    width: 100%;
    height: 184px;
    background: #FFFFFF;
    border-radius: 0px 0px 16px 16px;
    display: flex;
    flex-direction: column;

    padding: 0 30px;
    box-sizing: border-box;

    h1 {
      font-size: 36px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #262626;
      line-height: 54px;
      margin: 40px auto 32px;
    }

    aside {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #6777EF;
        line-height: 19px;
        cursor: pointer;
      }

      div {
        width: 360px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }


    }

    .disabled {
      background: #D9D9D9;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05999999865889549);
      color: #FFF;
      cursor: auto;

      &:active {
        background: #D9D9D9;
      }
    }

    span {
      button {

      }
    }
  }

  .info {
    width: 100%;
    height: 98px;
    //background: #C6CCFE;
    border-radius: 16px 16px 16px 16px;
    //margin: 0 auto 42px;
    padding: 0 15px;
    box-sizing: border-box;

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0;

      li {
        width: 110px;
        //color: #FFF;
        color: #465059;
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
      }
    }
  }

  .ranking {
    .rank {

    }
  }

  .rank-nav {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    height: 80px;
    //background: #FFFFFF;
    //box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.05999999865889549);
    border-radius: 16px 16px 0px 0px;
    border-bottom: 1px solid #D9D9D9;

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0;

      li {
        width: 110px;
        color: #000000;
        text-align: center;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
      }
    }
  }

  .rank-wrap {
    width: 100%;
    //height: 560px;
    overflow-y: scroll;
    border-radius: 0px 0px 0px 0px;
    box-sizing: border-box;


    ul {
      width: 100%;
      height: 100%;
      margin-bottom: 0;

      li {
        //&:nth-child(even) {
        //  background: #FFF;
        //}
        //
        //&:nth-child(odd) {
        //  background: #F7F8FC;
        //}

        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 0 15px;
        box-sizing: border-box;

        span {
          width: 110px;
          color: #1D1D1D;
          text-align: center;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
        }
      }
    }
  }
}


::-webkit-scrollbar {
  width: 8px;
  //background-color: #FFF;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
}

::-webkit-scrollbar {
  width: 6px;
  //background-color: #FFF;
}

::-webkit-scrollbar-thumb {
  background-color: #BBBDBF;
}


</style>